<template>
  <view class="carousel">
    <!-- 轮播组件，设置轮播图自动播放的时间间隔为5秒，关闭自动播放，开启循环播放 -->
    <swiper :interval="5000" :autoplay="false" :circular="true" @change="onChange">
      <!-- 每个swiper-item代表一个轮播项 -->
      <swiper-item v-for="item in list" :key="item.id">
        <!-- navigator为页面导航器，点击会跳转到/pages/index/index页面，设置鼠标悬停时的样式为node -->
        <navigator url="/pages/index/index" class="navigator" hover-class="node">
          <!-- 图片组件，src属性表示图片的来源地址，mode设置为aspectFill表示保持宽高比并填充，图片样式通过class属性引入 -->
          <image :src="item.url" mode="aspectFill" class="image" />
        </navigator>
      </swiper-item>
    </swiper>
    <!-- 轮播指示器 -->
    <view class="indicator">
      <!-- v-for指令遍历数字3，生成三个text元素，每个元素绑定一个唯一的key值，样式为dot，如果当前索引等于活跃索引activeIndex则应用active样式 -->
      <text
        v-for="(item, index) in list"
        :key="item.id"
        class="dot"
        :class="{ active: index === activeIndex }"
      ></text>
    </view>
  </view>
</template>

<script setup lang="ts">
// 从Vue框架引入响应式引用ref
import type { BannerItem } from '@/types/home'
import { ref } from 'vue'
// 定义一个响应式的数据activeIndex，表示当前活跃的轮播索引，初始值为0
const activeIndex = ref(0)
// 当swiper 下标变化的时候，更新activeIndex的值
const onChange: UniHelper.SwiperOnChange = (ev) => {
  // ！非空断言，主观上排除空值情况
  activeIndex.value = ev.detail.current
}
// 定义props接受
defineProps<{
  list: BannerItem[]
}>()
</script>

<style scoped lang="scss">
/* 作用于当前组件的主容器，设置样式为块状元素，高度为280px */
:host {
  display: block;
  height: 280px;
}
/* 轮播图样式定义 */
.carousel {
  height: 100%; /* 高度占满父容器 */
  position: relative; /* 相对定位 */
  overflow: hidden; /* 溢出隐藏 */
  transform: translateY(0); /* 初始不进行Y轴位移 */
  background-color: #efefef; /* 轮播图背景颜色 */
  /* 以下为指示器的样式 */
  .indicator {
    position: absolute; /* 绝对定位 */
    left: 0;
    right: 0;
    bottom: 19rpx; /* 底部距离19rpx */
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 水平居中 */
    .dot {
      /* 指示点样式 */
      width: 30rpx;
      height: 6rpx;
      margin: 0 10rpx; /* 外边距 */
      border-radius: 6rpx; /* 圆角 */
      background-color: rgba(255, 255, 255, 0.4); /* 背景颜色半透明 */
    }
    .active {
      /* 激活状态下的指示点样式 */
      background-color: #fff; /* 背景颜色为白色 */
    }
  }
  /* navigator内部的image样式，宽高100%表示填满navigator容器 */
  .navigator.image {
    width: 100%;
    height: 100%;
  }
}
</style>
